<template>
    <div class="content">
      <el-card>
        <div class="basic-info">
          用户详情
          <el-button style="float: right" size="small" @click="$router.go(-1)">
            返回
          </el-button>
        </div>
        <el-divider></el-divider>
        <div style="text-align: center">
          <el-avatar
            :size="150"
            :src="require('../../assets/img/avator.jpg')"
          ></el-avatar>
          <h2 style="margin: 10px 0px">{{ userInfo.name }}</h2>
          <span
            style="
              border-right: 2px solid #d2d2d2;
              padding-right: 10px;
              color: #999999;">
              在学课程 
            {{ userInfo.courseNum  }}</span
          >
          <span style="padding-left: 5px; color: #999999">
            已下订单
            {{ userInfo.courseOrder  }}</span>
          <p style="margin-top: 10px">
            <el-tag>
              <i class="fa fa-circle"></i>
              {{ userInfo.stateName }}
            </el-tag>
          </p>
        </div>
      </el-card>
      <el-card class="rowStyle">
        <div class="basic-info">基础信息</div>
        <el-divider></el-divider>
        <el-descriptions class="margin-top" :column="3">
          <el-descriptions-item>
            <template slot="label"> 姓名 </template>
            {{ userInfo.name  }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 昵称 </template>
            {{ userInfo.nickname  }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 手机号 </template>
            {{ userInfo.mobile }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 性别 </template>
            {{ userInfo.sex === 1 ? '男' : '女' }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 年龄 </template>
            {{ userInfo.age }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 联系地址 </template>
            {{ userInfo.address }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 标签 </template>
            <el-tag size="mini" type="primary">java开发</el-tag>
            <el-tag size="mini" type="success">Web开发</el-tag>
            <el-tag size="mini" type="danger">算法与数据结构</el-tag>
          </el-descriptions-item>
        </el-descriptions>
      </el-card>
    </div>
  </template>
  
  <script>
export default {
    data() {
      return {
        userInfo: {}
      }
    },

    created(){
      //钩子函数通过路由获取数据
      const queryData = this.$route.query;
      if (queryData.data) {
        this.userInfo = JSON.parse(queryData.data);
      }
    },

    methods: {
      /*
      async getUserDetail() {
        const result = await this.$axios.get("/user/detail", {
          params: { id: id }
        });
        if (result.data.success) {
          Object.assign(this.userInfo, result.data.data);
        } else {
          this.$message.error(result.data.message);
        }
      }, */
      
      handleClose() {
        this.drawer = false;
      },

    },

  }
  </script>
  
  <style scoped>
  .basic-info {
    border-left: 5px solid #2661ef;
    padding-left: 10px;
    font-weight: bold;
  }
  .rowStyle {
    margin-top: 10px;
  }
  .el-tag {
    margin-left: 5px;
  }

  </style>